<!-- TextBox.vue -->
<template>
  <div class="container">
    <div class="head_container">
      <div class="id_container">ID:{{ id }}</div>
      <div class="text_container">结局</div>
    </div>
    <div class="rich_text_container">
      <span
        style="
          width: 72px;
          height: 24px;
          color: #c4c4c4;
          padding-top: 12px;
          margin-right: 55px;
        "
        >结局选择</span
      >
      <div>
        <el-button @click="handleSelectEnding">请选择结局</el-button>
      </div>
    </div>
    <div class="rich_text_container">
      <span>结局图片</span>
      <div>
        <el-input
          disabled
          class="input-disable"
          placeholder="此处不用填,请选择结局"
          :model-value="SelectObject?.imageName || ''"
        />
      </div>
    </div>
    <div class="rich_text_container">
      <span>结局内容</span>
      <div>
        <el-input
          disabled
          class="input-disable"
          placeholder="此处不用填,请选择结局"
          :model-value="SelectObject?.detail || ''"
          >结局内容</el-input
        >
      </div>
    </div>
    <!--    <div class="rich_text_container">-->
    <!--      <span>下一步&nbsp;&nbsp;&nbsp; </span>-->
    <!--      <div>-->
    <!--        <el-input  v-model="nextStep" class="input-disable">下一步</el-input>-->
    <!--      </div>-->
    <!--    </div>-->

    <el-dialog v-model="dialogTableVisible" title="结局管理" width="800">
      <el-table :data="gridData" @row-click="handleRowClick">
        <el-table-column property="name" label="结局名称" width="150" />
        <el-table-column property="image" label="结局图片" width="200">
          <template #default="scope">
            <el-image :src="scope.row.image" style="width: 50px" />
          </template>
        </el-table-column>
        <el-table-column property="detail" label="结局描述" />
      </el-table>
    </el-dialog>

    <button class="saveButton" @click="handleSave()">保存</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, PropType, watch } from "vue";
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { getEndingById } from "@/api/ending";

export default defineComponent({
  name: "EndingEditor",
  props: {
    id: {
      type: String as PropType<string>,
      default: "0000"
    },
    valueFromParent: {
      type: Object as PropType<Object>,
      required: true,
      default: {
        moduleValue: {
          value: "1",
          nextChapter: 1
        },
        moduleNext: ""
      }
    }
  },
  emits: ["save"], // 定义自定义事件
  setup(props, { emit }) {
    const dialogTableVisible = ref(false);
    const gridData = ref([]);
    const route = useRoute();
    const SelectObject = ref(props.valueFromParent.moduleValue.value || {});
    const defaultNextId =
      props.id.split("-")[0] + "-" + (Number(props.id.split("-")[1]) + 1);
    // const nextStep = ref(
    //   props.valueFromParent?.moduleNext
    //     ? props.valueFromParent?.moduleNext
    //     : defaultNextId
    // );
    const nextStep = ref("");
    const handleSelectEnding = () => {
      //   获取章节
      const scriptId = route.query.scriptId;
      getEndingById(scriptId)
        .then(res => {
          if (res.code === "0000") {
            gridData.value = res.data.list;
          }
        })
        .catch(err => {
          console.log(err.response);
        });
      dialogTableVisible.value = true;
    };
    const handleRowClick = row => {
      SelectObject.value.imageName =
        row.name + "." + row.image.split(".").pop().toLowerCase() || "";
      SelectObject.value.image = row.image;
      SelectObject.value.detail = row.detail;
      SelectObject.value.name = row.name;
      SelectObject.value.id = row.id;
      dialogTableVisible.value = false;
    };

    const handleSave = () => {
      props.valueFromParent.moduleValue.value = SelectObject.value;
      props.valueFromParent.moduleNext = nextStep.value;

      const updatedContent = { ...props.valueFromParent };
      emit("save", updatedContent); // 触发save事件并传递
    };
    watch(
      () => props.valueFromParent,
      newVal => {
        SelectObject.value = newVal.moduleValue.value;
        nextStep.value = newVal?.moduleNext;
      },
      { deep: true }
    );

    return {
      nextStep,
      handleSelectEnding,
      dialogTableVisible,
      gridData,
      handleRowClick,
      SelectObject,
      handleSave
    };
  }
});
</script>
<style>
.el-input.is-disabled .el-input__wrapper {
  background: #232323;
}
.el-input__wrapper {
  background: #232323;
}
</style>

<style scoped>
.input-disable {
  width: 542px;
  min-height: 50px;
  opacity: 1;
  border-radius: 10px;
  margin-left: 55px;
}

.rich_text_container {
  display: flex;
  width: 680px;
  height: 119px;
  margin-left: 66.5px;
  margin-top: 10px;
}

.head_container {
  width: 811px;
  height: 55px;
  background-color: #525252;
  display: flex;
  align-items: center;

  .id_container {
    width: 75px;
    height: 25px;
    color: #a3a3a3;
    margin-left: 20px;
    margin-right: 298.5px;
  }

  .text_container {
    width: 44px;
    height: 30px;
  }
}

.container {
  width: 811px;
  height: 644.7px;
  background-color: #383838;
}

textarea {
  width: 100%;
  box-sizing: border-box;
}

.saveButton {
  height: 60px;
  width: 671px;
  background-color: #ff8d1a;
  color: #78491b;
  margin-left: 66.5px;
  margin-top: 3px;
  border-radius: 10px;
}

html.dark {
  --w-e-textarea-bg-color: #333;
  --w-e-textarea-color: #fff;
}

button {
  background-color: #ff8d1a;
  border: none;
  padding: 10px 20px;
  color: white;
  cursor: pointer;
  border-radius: 4px;
  margin-top: 10px;
}

button:hover {
  background-color: #e67e22;
}
</style>
